<template>
  <div class="container">
    <header-nav></header-nav>
    <div class="content mindWidth">
      <div class="content-list">
        <el-table
          :data="payInfo.payList"
          borderstyle="width: 100%"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
        >
          <el-table-column prop="applicationNumber" label="专利号" />
          <el-table-column prop="patentName" label="专利名称" />
          <el-table-column prop="feeType" label="费用种类" />
          <el-table-column prop="shouldPaymentAmount" label="应缴金额" />
          <el-table-column prop="serviceCharge" label="服务费" />
          <!-- <el-table-column prop="address" label="服务费原价" /> -->
          <el-table-column prop label="服务费会员价" />
          <!-- <el-table-column prop="" label="剩余免费服务次数" /> -->
          <el-table-column prop label="剩余免费服务次数">
            <template>
              <span>0</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="money flex flex-end">
        <!-- <div class="item">快递费：11</div> -->
        <div class="item">
          总金额：
          <span>{{ payInfo.lumpSum }}</span>
        </div>
      </div>
      <div class="pay-info-content">
        <h2 class="info-label">填写信息</h2>
        <div>
          <el-form label-width="120px" :model="customerData">
            <el-form-item label="收据抬头：">
              <el-input placeholder="请输入收据抬头" style="width:300px" v-model="customerData.receipt"></el-input>
            </el-form-item>
            <el-form-item label="邮寄地址：">
              <el-input
                placeholder="请输入邮寄地址"
                style="width:300px"
                v-model="customerData.mailingAddress"
              ></el-input>
            </el-form-item>
            <el-form-item label="联 系 人：">
              <el-input
                placeholder="请输入联系人"
                style="width:300px"
                v-model="customerData.contactPerson"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话：">
              <el-input
                placeholder="请输入联系电话"
                style="width:300px"
                v-model="customerData.contactNumber"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="pay-explain">
        <p class="label">专利年费缴费说明</p>
        <p class="must">*、请填写正确信息，如信息填写错误产生的后果将自行承担</p>
        <p>1、专利年费由平台代收代缴，专利局开具相关的收据。</p>
        <p>2、完善缴费相关的收据信息，包括：收据抬头、邮寄地址、联系人信息。</p>
        <p>3、每次专利年费专利局只开具以一次收据，如果用户在缴费的时候没有提供完善的信息，导致无法收到专利局开具的收据，平台不承担相关责任。</p>
        <p>4、代缴服务费及快递费用由平台收取，不开具相关发票。</p>
      </div>
      <div class="pay-btn flex-end flex">
        <el-button type="primary" @click="toPay">支付</el-button>
      </div>
      <div v-show="open" class="flex">
        <div>微信支付：</div>
        <canvas ref="qrcode">
          <img src alt />
        </canvas>
      </div>
    </div>
    <navigation></navigation>
    <footer-nav></footer-nav>
  </div>
</template>
<script>
import paging from "@/components/paging.vue";
import { getPatentPayInventory } from "../../api/api.js";
import QRCode from "qrcode";
import { isMobile } from "../../util/validate.js";
import { appId, callBackUrl } from "../../constant/index";
export default {
  components: {
    paging
  },
  data() {
    return {
      payInfo: {},
      customerData: {
        contactNumber: "",
        contactPerson: "",
        mailingAddress: "",
        receipt: ""
      },
      visible: false,
      open: false,
      applicationNumbers: this.$route.query.num
    };
  },
  watch: {
    open(val) {
      console.log(val);
      if (val) {
        this.generateQRCode(val);
      }
    }
  },
  mounted() {
    this.getPayList();
  },
  methods: {
    getPayList() {
      getPatentPayInventory({
        applicationNumbers: this.applicationNumbers
      }).then(res => {
        this.payInfo = res;
      });
    },
    generateQRCode() {
      let domain =
        window.location.protocol +
        "//" +
        window.location.hostname +
        (window.location.port ? ":" + window.location.port : "");
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      // wx0efacf82e40d21b5   wxda141ae36aedc306
      // web.51bmj.net  www.51bmj.cn
      var url =
        `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=` +
        encodeURIComponent(
          `${callBackUrl}/app/payNew.html?payType=` +
            "005" +
            "&userId=" +
            userInfo.id +
            "&applicationNumbers=" +
            this.applicationNumbers +
            "&contactNumber=" +
            this.customerData.contactNumber +
            "&contactPerson=" +
            this.customerData.contactPerson +
            "&mailingAddress=" +
            this.customerData.mailingAddress +
            "&receipt=" +
            this.customerData.receipt +
            "&redirectUrl=" +
            domain +
            "/pages/index/index"
        ) +
        `&response_type=code&scope=snsapi_base`;
      console.log(url);
      //生成二维码连接让用户微信扫码
      this.qrcode(url);
    },
    // 生成二维码
    qrcode(url) {
      let _this = this;
      let opts = {
        errorCorrectionLevel: "H",
        type: "image/png", // 生成的二维码类型
        quality: 0.8, // 二维码质量
        margin: 0, // 二维码留白边距
        width: 200, // 宽度
        color: {
          dark: "#333", // 前景色
          light: "#fff" // 背景色
        }
      };
      QRCode.toCanvas(_this.$refs.qrcode, url, opts);
    },
    toPay() {
      let customerData = [
        { value: this.customerData.receipt, text: "收据抬头" },
        { value: this.customerData.mailingAddress, text: "邮寄地址" },
        { value: this.customerData.contactPerson, text: "联系人" },
        { value: this.customerData.contactNumber, text: "联系电话" }
      ];
      for (let i = 0; i < customerData.length; i++) {
        let obj = customerData[i];
        if (!obj.value) {
          this.$message({
            type: "warning",
            message: `请填写${obj.text}`
          });
          return;
        }
      }
      if (!isMobile(this.customerData.contactNumber)) {
        this.$message({ type: "warning", message: "请输入正确的手机号码" });
        return;
      }
      this.open = true;
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  .content {
    background: #fff;
    box-sizing: border-box;
    padding: 20px 30px;
    box-shadow: 0 0 10px #ccc;
    margin: 40px auto;
    .content-list {
    }
    .money {
      margin: 15px 0;
      font-size: 14px;
      .item {
        margin-left: 15px;
        span {
          color: red;
        }
      }
    }
    .pay-info-content {
      .info-label {
        margin: 15px 0;
      }
    }
    .pay-explain {
      font-size: 12px;
      color: #999;
      padding: 20px 0;
      box-sizing: border-box;
      border-bottom: 1px solid #999;
      .label {
        margin-bottom: 15px;
      }
      .must {
        color: red;
      }
    }
    .pay-btn {
      margin: 20px 0;
    }
  }
}
</style>
